<!--
  增删改查示例
  @author 邵鹏坤 2022年9月22日
  1 功能解析：
    1.1 列表展示
      1.1.1 数据源：示例
        tableData：Array<{
          name:'张三'，
          height:180，
          weight:200，
          birth:’2022-9-22 21：02：30，
          ...
        }>
    1.2 ...
  2 数据源：
-->
<template>
  <div class="md-container">
    <div class="ep-row" @click="mdVisible ? (mdVisible = false) : (mdVisible = true)">
      <p>示例代码</p>
      <div class="icon-row">
        <Icon class="close-btn" icon-class="icon-caret-up" v-if="mdVisible"></Icon>
        <Icon class="close-btn" icon-class="icon-caret-down" v-if="!mdVisible"></Icon>
      </div>
    </div>
    <div class="md">
      <Transition name="mdBox">
        <component v-if="mdVisible" :is="getCom(props.fileName)" />
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineProps, defineAsyncComponent } from 'vue'
  import Icon from '@/views/icon/Icon.vue'
  const mdVisible = ref(false)
  const props = defineProps(['fileName'])
  const getCom = (fileName: string) => {
    return defineAsyncComponent(() => import('@/assets/md/' + fileName + '.md'))
  }
</script>

<style lang="scss" scoped>
  .win-button {
    margin: 6px 12px;
  }
  .md-container {
    border: $table-border-color solid;
    border-width: 0 1px 1px 1px;
    margin: 0 3% 26px;
    border-radius: 0 0 8px 8px;
    padding: 12px;

    .ep-row {
      background-color: transparent;
      text-align: center;
      transition: 0.4s;
      .icon-row {
        height: 0px;
        transition: 0.4s;
      }
      .close-btn {
        transition: 0.4s;

        color: $theme-color;
        font-size: 1px;
        opacity: 0;
        transform-origin: 50% 0;
      }
      .close-btn:hover,
      p:hover {
        cursor: pointer;
      }
    }
    .ep-row:hover {
      color: $theme-color;
      .icon-row {
        height: 20px;
      }
      .close-btn {
        transform: translateY(4px);
        color: $theme-color;
        opacity: 1;
        font-size: 22px;
        margin-top: -12px;
      }
    }
    .md {
      transition: 0.4s ease;
      background-color: #f4f4f4;
      .language-html,
      * {
        // 禁止选中
        user-select: text;
      }
    }
  }
  .mdBox-enter-active,
  .mdBox-leave-active {
    transition: all 0.8s ease;
  }
  .mdBox-leave-to,
  .mdBox-enter-from {
    opacity: 0;
    transform: translateY(-35px);
  }
</style>
